Review: Outline the user flow for projects 回顧：為專案繪製使用者流程圖
什麼是使用者流程圖
使用者流程圖是一種圖表，用來展示使用者如何一步步使用App或網站完成任務。它能幫助設計師和開發團隊瞭解：使用者會做什麼操作，使用者會看到哪些頁面，使用者在哪裡需要做選擇。使用者流程圖使用簡單的圖形符號，讓團隊更容易理解使用者的使用過程。
常用圖形符號
CoffeeHouse App：使用者流程例項
專案目標
CoffeeHouse App 讓使用者可以提前為團隊訂咖啡，幫助需要大量訂單的使用者節省時間，不用在店裡排隊。成功標準是：透過App一次下單超過5件商品的訂單數量。
我們的CoffeeHouse 應用程式
讓使用者能夠提前下團體訂單
這項功能將惠及需要下大額訂單並親自取餐的使用者，
幫助他們跳過店內排隊，節省寶貴時間。
我們將透過統計應用內下達5件及以上商品的訂單數量來評估成效。
核心使用者任務
使用者的主要任務是：用 CoffeeHouse App 快速方便地為團隊訂咖啡。
操作步驟
| Step | Action Description | Symbol Type |
|---|---|---|
| 1 | Open the app | Action (Circle) |
| 2 | Go to homepage | Screen (Rectangle) |
| 3 | Search for coffee shops | Action (Circle) |
| 4 | Select a coffee shop | Action (Circle) |
| 5 | Decide whether to order from this shop (Yes/No) | Decision (Diamond) |
| 6 | Enter the order screen | Screen (Rectangle) |
| 7 | Click to share the menu link | Action (Circle) |
| 8 | Decide whether to send the menu to the team (Yes/No) | Decision (Diamond) |
| 9 | Start order timer | Action (Circle) |
| 10 | Team members add desired items | Action (Circle) |
| 11 | View order preview | Screen (Rectangle) |
| 12 | Go to checkout page | Screen (Rectangle) |
| 13 | Fill in payment details | Action (Circle) |
| 14 | Click checkout | Action (Circle) |
| 15 | View order confirmation page | Screen (Rectangle) |
- 開啟App
- 進入首頁
- 搜尋咖啡店
- 選擇一家店
- 決定是否在這家店下單（是/否）
- 進入訂單頁面
- 點選分享選單連結
- 決定是否傳送選單給團隊（是/否）
- 啟動訂單倒計時
- 團隊成員新增想要的商品
- 檢視訂單預覽
- 進入結賬頁面
- 填寫付款資訊
- 點選結賬
- 檢視訂單確認頁面
使用者流程圖示例
2.1 起點：啟動應用
圓形(操作)：開啟應用
矩形(螢幕)：主頁
圓形：搜尋咖啡店位置
圓形：選擇咖啡店位置
2.2 決策點一：是否在當前門店下單?
菱形(決策)：在這裡下單?
選擇是：繼續到訂單頁面(訂單螢幕)
選擇否：返回到"搜尋咖啡店位置"頁面(虛線箭頭表示返回)
2.3 訂單流程開始
矩形：訂單螢幕
圓形：點選選單連結
2.4 決策點二：是否傳送選單給團隊?
菱形：傳送選單給團隊?
選擇是：繼續到"啟動訂單計時器"
選擇否：返回"訂單螢幕"(虛線箭頭)
2.5 團隊新增商品
圓形：啟動訂單計時器
圓形：新增商品到訂單
矩形：訂單預覽
2.6 結賬流程
圓形：前往結賬
圓形：填寫結賬資訊
2.7 決策點三：是否確認訂單?
菱形：確認訂單?
選擇是：進入最終頁面
選擇否：返回"訂單預覽"(虛線箭頭)
2.8 成功完成任務
矩形：Order confirmation
